<!doctype html>
<html arb:namespace="arb_editor">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<head>
<title>Randall Bogg</title>

<script src='arbcore.js'>
</script>
<script src="resource.arb">
</script>

<!-- arb_editor.js is compiled to arb_editor_min.js
This demo program heavily used Closure library (Google's open source Javascript
library. To avoid inclusion of this huge library, Closure compiler service is
used to resolve the dependency.
-->
<script src="arb_editor_min.js">
</script>

<link rel="stylesheet" href="common.css">
<link rel="stylesheet" href="tree.css">
<style>
body {margin: 45px 20px 0 20px}
.arb_text_area {border: 1px solid grey; padding: 5px; width: 100%}
.res_label {padding-top: 15px}
#arb_key {width: 100%; font-weight: bold; text-align: center}
#res_entry {padding: 10px; }
#locale_combo {display: inline-block;}
#locale_combo input {width: 120px;}
#add_lang_combo {display: inline-block;}
#add_lang_combo input {width: 120px;}
#top_panel {width: 800px; position:relative; left:0px}
#status_console {width:800px; height:30px; margin-top: 5px}
#title {margin-left: 135px}
#logo {float:left; margin: -35px 0 0 -20px}
#entry_command_panel {margin: 50px auto 10px auto }

.goog-debug-panel {width: 780px}
</style>

<style arb:id="localstyle">
#res_tree {background-color: #05F7F7}
#res_entry {background-color: #05F7F7}
</style>
<style arb:id="font_style">

</style>
</head>
<body onload="main()">

<h2 arb:id="title">Application Resource Bundle Editor</h2>

<div style="float:right">
  <A id="signin_link"
     href="https://www.google.com/accounts/ServiceLogin?service=ah&passive=true"
     target="_blank">Sign In</a>
</div>

<div id="top_panel">
  <button id="upload_btn">Upload</button>
  <button id="download_btn">Download</button>
  <button id="check_btn">Check Consistency</button>
  <div id="locale_combo"></div>
  <div id="add_lang_combo"></div>
</div>

<br>

<div id="arb_panel" class="goog-splitpane">
  <div id="arb_tree" class="goog-splitpane-first-container">
  </div>

  <div id="arb_entry" class="goog-splitpane-second-container">
    <div arb:id='res_id_label' class="res_label">Id: </div>
    <input id="res_id" type="text" size="80"></input> <br>
    <div arb:id='res_value_label' class="res_label">Value: </div>
    <textarea id="res_value" class="arb_text_area"></textarea>
    <br>

    <div arb:id='res_attr_label' class="res_label">Attribute: </div>
    <textarea id="res_attr" class="arb_text_area"></textarea> <br>

    <div id="entry_command_panel">
    <button id="new_entry_btn">New</button>
    <button id="delete_entry_btn">Delete</button>
    </div>

  </div>

  <div class="goog-splitpane-handle">
  </div>
</div>

<!-- Event log. -->
<fieldset class="goog-debug-panel">
  <legend>Event Log</legend>
  <div id="div_console"></div>
</fieldset>


<script>
  function main() {
      var locale = arb.getParamFromUrl('locale');
      if (!locale) {
          locale = 'en';
      }
      arb.setResourceSelector(locale);

      var editor = new arb_editor('arb_editor');
      editor.decorate('top_panel');

      // this one need to be called the last to set display items.
      arb.localizeHtml();
  }
</script>

</body>
</html>
